<template>
  <div class="filter">
    <div class="filter-item">
      <label for="">会员姓名：</label>
      <Input
        v-model="vipName"
        placeholder="请输入"
        style="width: 200px"
        clearable
      />
    </div>
    <div class="filter-item">
      <label for="">性别：</label>
      <Select v-model="vipSex" style="width: 200px" clearable>
        <Option v-for="item in sexList" :value="item.value" :key="item.value">{{
          item.label
        }}</Option>
      </Select>
    </div>
    <div class="filter-item">
      <label for="">电话：</label>
      <Input
        v-model="vipPhone"
        placeholder="请输入"
        style="width: 200px"
        clearable
      />
    </div>
    <div class="filter-item">
      <Button type="info" @click="getVipList">查询</Button>
    </div>
    <div class="filter-item">
      <Button type="success" @click="showAddVipModal">新增</Button>
    </div>
    <div class="filter-item">
      <div class="table">
        <Table
          border
          :columns="vipColumns"
          :data="vipListData"
          width="1500"
        ></Table>
      </div>
      <div class="page">
        <Page :total="total" show-elevator show-total @on-change="pageChange" />
      </div>
    </div>
    <Modal v-model="addVipModal" width="1000">
      <add-vip ref="addVip" @on-close-add-modal="closeAddVipModal" />
      <div slot="footer">
        <Button @click="closeAddVipModal">取消</Button>
        <Button type="error" @click="addVip">新增</Button>
      </div>
    </Modal>
    <Modal v-model="watchModal" width="1200" :title="title" @on-cancel="getVipList()">
      <watch ref="watch" />
    </Modal>
    <Modal v-model="updateModal" width="800" title="更新信息">
      <add-vip ref="updateVip" @on-close-upd-modal="closeUpdateVipModal" />
      <div slot="footer">
        <Button @click="closeUpdateVipModal">取消</Button>
        <Button type="error" @click="updVip">更新</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "axios";
import addVip from "./moudle/addVip.vue";
import watch from "./moudle/watchVipCourse.vue";
export default {
  name: "vipList",
  components: {
    addVip,
    watch,
  },
  data() {
    return {
      meto: "ke",
      total: 0,
      vipColumns: [
        {
          type: "index",
          title: "序号",
          width: 100,
        },
        {
          title: "姓名",
          key: "vipName",
          align: "center",
        },
        {
          title: "性别",
          key: "vipSex",
          align: "center",
        },
        {
          title: "电话号码",
          key: "vipPhone",
          align: "center",
        },
        {
          title: "剩余未上课程（节）",
          key: "notUsedCourse",
          align: "center",
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",{
                   props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginLeft: "5px",
                  },
                  on:{
                    click:()=>{
                      this.$refs.updateVip.vipId = params.row.vipId;
                      this.$refs.updateVip.vipSex = params.row.vipSex;
                      this.$refs.updateVip.vipName = params.row.vipName;
                      this.$refs.updateVip.vipPhone = params.row.vipPhone;
                      console.log(params.row.vipId)
                      this.showUpdateVipModal();
                    }
                  }
                },"更新信息"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginLeft: "5px",
                  },
                  on: {
                    click: () => {
                      this.$refs.watch.vipId = params.row.vipId;
                      this.title = params.row.vipName;
                      this.$refs.watch.getAllCourseByVipId();
                      this.showWatchModal();
                    },
                  },
                },
                "查看课程"
              ),
              h("Button", {
                props: {
                  type: "error",
                  size: "small",
                },
                style: {
                  marginLeft: "5px",
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: "删除提醒",
                      content: "是否删除" + params.row.vipName + "学员",
                      onOk: () => {
                        axios
                          .post("/api/gym/vip/updateVip", {
                            vipId: params.row.vipId,
                            isShow: 0,
                          })
                          .then((res) => {
                            if (res.data.status == 200) {
                              (this.pageNo = 1), this.getVipList();
                            }
                          });
                      },
                    });
                  },
                },
              },"删除"),
            ]);
          },
        },
      ],
      vipListData: [],
      pageNo: 1,
      vipName: "",
      vipPhone: "",
      vipSex: "",
      sexList: [
        {
          label: "男",
          value: "男",
        },
        {
          label: "女",
          value: "女",
        },
      ],
      addVipModal: false,
      watchModal: false,
      updateModal:false,
      title: "",
    };
  },
  methods: {
    pageChange(e) {
      this.pageNo = e;
      this.getVipList();
    },
    initGet(){
      this.pageNo = 1;
      this.getVipList();
    },
    getVipList() {
      axios
        .post("/api/gym/vip/getVipPage", {
          pageNo: this.pageNo,
          vipName: this.vipName?this.vipName:'',
          vipPhone: this.vipPhone?this.vipPhone:'',
          vipSex: this.vipSex?this.vipSex:'',
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.vipListData = res.data.data.records;
            this.total = res.data.data.total;
          }
        });
    },
    showAddVipModal() {
      this.addVipModal = true;
    },
    closeAddVipModal() {
      this.addVipModal = false;
      this.getVipList();
    },
    showWatchModal() {
      this.watchModal = true;
    },
    addVip() {
      this.$refs.addVip.addVip();
    },
    closeUpdateVipModal(){
      this.updateModal = false;
      this.getVipList();
    },
    showUpdateVipModal(){
      this.updateModal = true;
    },
    updVip(){
      this.$Modal.confirm({
        title:'更新提示',
        content:'请检验信息是否无误',
        onOk:()=>{
          this.$refs.updateVip.updateVip();
        }
      })
    }
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  margin-left: 20px;
  margin-top: 10px;
}
.table {
  margin-top: 20px;
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>
